<template>
  <div>
    <van-overlay :show="overlay">
      <div class="upper">
        <div class="img">
          <img src="../../img/new-logo.png" alt="" class="logo" />
          <img src="../../img/makees.png" alt="" class="logo1" />
        </div>
      </div>
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" v-if="loading" />
      </div>
    </van-overlay>
    <!-- 关单 -->
    <my-close v-if="close"></my-close>
    <!-- 超时 -->
    <my-expired v-if="expired"></my-expired>
    <!-- Link4Pay -->
    <link-pay v-if="credit"></link-pay>
    <!-- Crypto -->
    <my-crypto v-if="crypto"></my-crypto>
    <!-- PacyPay -->
    <pacy-pay v-if="pacypay"></pacy-pay>
    <!-- PixPay -->
    <pix-pay v-if="pixpay"></pix-pay>
  </div>
</template>

<script>
import 'vant/lib/index.css'
import { Toast } from 'vant'
import axios from 'axios'
import { getPingAPI } from '@/api/query'
import { newDate } from '@/utils/means'
// import HectoPay from '@/utils/produce_SettlePG_v1.2'
import HectoPay from '@/utils/SettlePG_v1.2'
import LinkPay from '@/views/linkpay/index.vue'// LinkPay
import MyCrypto from '@/views/Crypto/index.vue'// Crypto
import PacyPay from '@/views/CreditPacypay/index.vue'// PacyPay
import PixPay from '@/views/pixpay/index.vue'// PixPay
export default {
  name: 'PayMent',
  components: {
    LinkPay, // link4pay
    MyCrypto, // Crypto
    PacyPay, // PacyPay
    PixPay// PixPay
  },
  data () {
    return {
      queryParam: {
        orderId: undefined,
        sign: undefined
      },
      isClosed: null,
      isExpired: null,
      creditIsShow: null,
      cryptoIsShow: null,
      orderList: [],
      overlay: true, // 整个遮罩层
      loading: true, // 遮罩层里面的加载图标
      close: false, // 关单
      expired: false, // 超时
      credit: false, // link4pay
      crypto: false, // crypto
      pacypay: false, // pacypay
      pixpay: false, // PixPay
      hecto: null// 韩国
    }
  },
  beforeCreate () {
    const data = {
      orderId: this.$route.query.orderId,
      enterpayment: 'enter-payment = ' + newDate()
    }
    getPingAPI(data)
  },
  created () {
    this.getParam()
  },
  mounted () {
    this.goback()
    // 加载完成
    this.$nextTick(() => {
      const data = {
        orderId: this.$route.query.orderId,
        paymentcompleted: 'payment-Loading-completed = ' + newDate()
      }
      getPingAPI(data)
    })
  },
  methods: {
    getParam () {
      this.queryParam.orderId = this.$route.query.orderId
      this.queryParam.sign = this.$route.query.sign
    },
    // 接口
    getAllUersAPI () {
      return axios({
        url: '/prod-api/api/v1/createPaymentOrder',
        method: 'post',
        Headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: {
          orderId: this.queryParam.orderId,
          sign: this.queryParam.sign
        }
      })
    },
    goback () {
      this.getAllUersAPI().then(res => {
        // 获取后台显示状态
        this.code = res.data.code
        if (this.code !== 0) {
          this.loading = false
          Toast({
            message: res.data.msg,
            forbidClick: true,
            className: Toast,
            duration: 'toast'
          })
          this.close1 = true
        } else {
          this.isClosed = res.data.data.isClosed// 是否关单
          this.isExpired = res.data.data.isExpired// 是否过期
          this.cryptoIsShow = res.data.data.cryptoIsShow// 是否加密货币下单
          this.creditIsShow = res.data.data.creditIsShow// 是否银行卡下单
          if (this.isClosed === true) {
            const data = {
              orderId: this.$route.query.orderId,
              paymentJumpclose: 'payment-Jump-close = ' + newDate()
            }
            getPingAPI(data)
            this.overlay = false
            this.close = true
          }
          if (this.isExpired === true) {
            const data = {
              orderId: this.$route.query.orderId,
              paymentJumpexpired: 'payment-Jump-expired = ' + newDate()
            }
            getPingAPI(data)
            this.loading = false
            this.expired = true
          }
          if (this.isClosed === false && this.isExpired === false) {
            this.orderList.push(res.data.data)
            // 信用卡付款
            if (this.creditIsShow === true) {
              localStorage.setItem('orderList', JSON.stringify(this.orderList))
              const data = {
                orderId: this.$route.query.orderId,
                enterlinkpay: 'enter-linkpay = ' + newDate()
              }
              getPingAPI(data)
              this.overlay = false
              this.credit = true
            }
            // 数字货币付款
            if (this.cryptoIsShow === true) {
              localStorage.setItem('orderList', JSON.stringify(this.orderList))
              const data = {
                orderId: this.$route.query.orderId,
                entercrypto: 'enter-crypto = ' + newDate()
              }
              getPingAPI(data)
              this.overlay = false
              this.crypto = true
            }
            // pacy_pay付款
            if (res.data.data.transactionId) {
              localStorage.setItem('orderList', JSON.stringify(this.orderList))
              const data = {
                orderId: this.$route.query.orderId,
                enterpacy_pay: 'enter-pacy_pay = ' + newDate()
              }
              getPingAPI(data)
              this.overlay = false
              this.pacypay = true
            }
            // pix付款
            if (res.data.data.qr) {
              localStorage.setItem('orderList', JSON.stringify(this.orderList))
              const data = {
                orderId: this.$route.query.orderId,
                enterpix: 'enter-pix = ' + newDate()
              }
              getPingAPI(data)
              this.overlay = false
              this.pixpay = true
            }
            // 跳转
            if (res.data.data.redirectURL) {
              const data = {
                orderId: this.$route.query.orderId,
                JumpURL: 'Jump-URL = ' + newDate()
              }
              getPingAPI(data)
              location.href = res.data.data.redirectURL
            }
            // 渲染
            if (res.data.data.pageData) {
              const data = {
                orderId: this.$route.query.orderId,
                RenderingHtml: 'Rendering-Html = ' + newDate()
              }
              getPingAPI(data)
              this.pageData = res.data.data.pageData
              this.iframe()
            }
            // 韩国
            if (res.data.data.hecto) {
              const hecto = res.data.data.hecto
              const Width = document.body.clientWidth
              const Height = document.body.clientHeight
              const data = {
                // env: 'https://npg.settlebank.co.kr',
                env: 'https://tbnpg.settlebank.co.kr',
                ...hecto,
                ui: {
                  type: 'self',
                  width: JSON.stringify(Width),
                  height: JSON.stringify(Height)
                }
              }
              HectoPay.SETTLE_PG.pay(data, function (rsp) {
                console.log(rsp)
              })
            }
          }
        }
      }).then(() => {
      })
    },
    // link4pay页面后台获取
    iframe () {
      window.localStorage.removeItem('callbackHTML')
      // res.data 为后端返回的html字符串
      window.localStorage.setItem('callbackHTML', this.pageData)
      // 读取本地保存的html数据，在本页打开
      const newWin = window.open('', '_self')
      newWin.document.write(localStorage.getItem('callbackHTML'))
      // 关闭输出流
      newWin.document.close()
    }
  }
}
</script>

<style scoped lang="scss">
// 移动端
@media screen and (max-width: 700px) {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
    z-index: 100;
  }
  .upper {
    width: 100%;
    height: 1.15385rem;
    margin: 0 auto;
    background-color: #215dd4;
    z-index: 200 !important;
  }
  .logo {
    width: 20%;
    height: 0.64103rem;
    margin-top: 0.25641rem;
    margin-left: 38%;
  }
  .logo1 {
    display: none;
  }
  .img {
    padding-top: 1px;
  }
}
// pc
@media screen and (min-width: 700px) {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
    z-index: 100;
  }
  .upper {
    width: 100%;
    height: 0.32rem;
    margin: 0 auto;
    background-color: #215dd4;
    z-index: 200 !important;
  }
  .logo {
    height: 0.19rem;
    width: 6.5%;
    margin-left: 10%;
    margin-top: 0.075rem;
  }
  .logo1 {
    height: 0.15rem;
    width: 13%;
    margin-left: 0.5%;
    margin-bottom: 0.025rem;
  }
}
</style>
